<template>
  <div>
    <tableComponents
      :pagination="{ currentPage, pageSize, total: list.all_num }"
      @handleCurrentChange="handleCurrentChange"
      @handleSizeChange="handleSizeChange"
      @sendUserSearch="getSearch"
      :searchData="userSearchData"
      :isHaveExport="false"
      :isHaveAdd="false"
    >
      <template v-slot:searchBottom>
        <el-form class="search_prod search_prod1" label-width="94px">
          <el-form-item label="审核状态">
            <el-row class="tl mar_bottom_15">
              <el-radio-group
                v-model="is_check"
                size="small"
                class="tl money-group"
                @change="reload"
              >
                <el-radio-button label=""> 全部 </el-radio-button>
                <el-radio-button label="0"> 待审核 </el-radio-button>
                <el-radio-button label="1"> 审核通过 </el-radio-button>
                <el-radio-button label="2"> 审核驳回 </el-radio-button>
              </el-radio-group>
            </el-row>
          </el-form-item>
        </el-form>
      </template>
      <template v-slot:table>
        <el-table
          ref="multipleTable"
          :data="list.data"
          v-loading="loading"
          header-row-class-name="head_color"
          stripe
          tooltip-effect="dark"
          style="width: 99.9%"
        >
          <el-table-column label="用户信息" min-width="160">
            <template slot-scope="scope">
              <div class="fx" style="justify-content: flex-start">
                <div class="tc" style="margin-right: 20px">
                  <img
                    style="width: 50px; height: 50px"
                    :src="imgError(scope.row.avatar)"
                    class="user_img"
                  />
                  <span>{{ scope.row.rating_cn || "---" }}</span>
                </div>
                <div class="user_table">
                  <p>
                    <span>账号/手机号：</span>
                    <small>{{ scope.row.username || "---" }}</small>
                  </p>
                  <p>
                    <span>昵称：</span>
                    <small>{{ scope.row.nickname || "---" }}</small>
                  </p>
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="申请信息" min-width="180">
            <template slot-scope="scope">
              <div class="user_table">
                <p>
                  <span>股东权益：</span>
                  <small>{{
                    scope.row.types == 1
                      ? "单店股东"
                      : scope.row.types == 2
                      ? "全量股东"
                      : "---"
                  }}</small>
                </p>
                <p>
                  <span>真实姓名：</span>
                  <small>{{ scope.row.name }}</small>
                </p>
                <p>
                  <span>联系方式：</span>
                  <small>{{ scope.row.tel }}</small>
                </p>
                <p>
                  <span>身份证号：</span>
                  <small>{{ scope.row.card }}</small>
                </p>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="股东预存金" min-width="140">
            <template slot-scope="scope">
              <div
                class="user_table"
                v-if="scope.row.oid > 0 && scope.row.order"
              >
                <p>
                  <span>订单号：</span>
                  <small>{{ scope.row.oid_cn || "---" }}</small>
                </p>
                <p>
                  <span>支付金额：</span>
                  <small>{{ scope.row.order.money | keepTwoNum }}</small>
                </p>
                <p>
                  <span>是否支付：</span>
                  <small>{{ scope.row.order.is_pay == 1 ? "是" : "否" }}</small>
                </p>
                <p>
                  <span>支付方式：</span>
                  <small>{{ scope.row.order.pay }}</small>
                </p>
                <p>
                  <span>订单状态：</span>
                  <small>{{ scope.row.order.status || "---" }}</small>
                </p>
              </div>
              <div v-else>暂无订单</div>
            </template>
          </el-table-column>

          <el-table-column label="店铺信息" min-width="140">
            <template slot-scope="scope">
              <div class="user_table" v-if="scope.row.extract_id > 0">
                <p>
                  <span>店铺名称：</span>
                  <small>{{ scope.row.extract_title || "---" }}</small>
                </p>
                <p>
                  <span>店铺区域：</span>
                  <small>
                    {{ scope.row.extract_province }}{{ scope.row.extract_city
                    }}{{ scope.row.extract_area }}{{ scope.row.extract_town }}
                  </small>
                </p>
              </div>
              <div v-else>暂未选择</div>
            </template>
          </el-table-column>

          <el-table-column label="审核状态" min-width="100">
            <template slot-scope="scope">
              <div class="tab_div">
                <el-tag
                  type="warning"
                  v-if="scope.row.is_check == 0"
                  effect="dark"
                  >审核中</el-tag
                >
                <el-tag
                  type="success"
                  v-else-if="scope.row.is_check == 1"
                  effect="dark"
                  >审核通过</el-tag
                >
                <el-tag
                  type="danger"
                  v-else-if="scope.row.is_check == 2"
                  effect="dark"
                  >驳回</el-tag
                >
              </div>
              <br />
              <div class="tab_div" v-if="scope.row.remark">
                <b>备注：</b>{{ scope.row.remark || "----" }}
              </div>
            </template>
          </el-table-column>

          <el-table-column label="操作" min-width="140" align="center">
            <template slot-scope="scope">
              <el-button
                :loading="$store.state.isLoading"
                type="primary"
                size="mini"
                @click="editBtn(scope.row)"
              >
                审核
              </el-button>
              <!-- <el-button
                :loading="$store.state.isLoading"
                type="success"
                size="mini"
                @click="equity(scope.row)"
                v-if="scope.row.is_check == 1 && scope.row.oid > 0"
              >
                发放预存金
              </el-button> -->
              <el-button
                :loading="$store.state.isLoading"
                size="mini"
                @click="deleteNew(scope.row.id)"
                type="danger"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </tableComponents>

    <el-dialog
      :close-on-click-modal="false"
      title="审核"
      :modal-append-to-body="false"
      :visible.sync="show_edit"
      class="tl size_13"
      width="800px"
    >
      <el-form label-width="160px">
        <el-form-item label="用户账号">
          <el-col :span="18">
            <el-input
              placeholder="请选择关联用户的账号"
              v-model="editInfo.username"
              disabled
              size="small"
            ></el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="真实姓名">
          <el-col :span="18">
            <el-input v-model="editInfo.name" size="small"></el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="联系方式">
          <el-col :span="18">
            <el-input v-model="editInfo.tel" size="small"></el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="身份证号码">
          <el-col :span="18">
            <el-input v-model="editInfo.card" size="small"></el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="身份证正面">
          <el-col :span="16">
            <el-input v-model="editInfo.card_pic1" size="small"></el-input>
            <compressimgUpload
              :onSuccess="onSuccess1"
              :pic="editInfo.card_pic1"
              :isOneImg="true"
              :files="[]"
            ></compressimgUpload>
          </el-col>
          <el-col :span="4" :offset="1" v-if="editInfo.card_pic1">
            <el-button
              :loading="$store.state.isLoading"
              size="mini"
              type="success"
              @click="toImg(editInfo.card_pic1)"
            >
              查看图片
            </el-button>
          </el-col>
        </el-form-item>

        <el-form-item label="身份证背面">
          <el-col :span="18">
            <el-input v-model="editInfo.card_pic2" size="small"></el-input>
            <compressimgUpload
              :onSuccess="onSuccess2"
              :pic="editInfo.card_pic2"
              :isOneImg="true"
              :files="[]"
            ></compressimgUpload>
          </el-col>
          <el-col :span="4" :offset="1" v-if="editInfo.card_pic2">
            <el-button
              :loading="$store.state.isLoading"
              size="mini"
              type="success"
              @click="toImg(editInfo.card_pic2)"
            >
              查看图片
            </el-button>
          </el-col>
        </el-form-item>

        <el-form-item label="申请店铺">
          <el-col :span="18">
            <el-input
              v-model="editInfo.extract_title"
              size="small"
              disabled
            ></el-input>
          </el-col>
          <el-col :span="4" :offset="1">
            <el-button
              :loading="$store.state.isLoading"
              size="mini"
              type="primary"
              @click="xzshop('xz_extract')"
            >
              选择
            </el-button>
          </el-col>
        </el-form-item>

        <el-form-item label="股东权益：">
          <el-col :span="18">
            <el-radio-group v-model="editInfo.types">
              <el-radio label="0">未选择</el-radio>
              <el-radio label="1">单店股东</el-radio>
              <el-radio label="2">全量股东</el-radio>
            </el-radio-group>
          </el-col>
        </el-form-item>

        <el-form-item label="审核状态：">
          <el-col :span="18">
            <el-radio-group v-model="editInfo.is_check">
              <el-radio label="0">未审核</el-radio>
              <el-radio label="1">已审核</el-radio>
              <el-radio label="2">驳回</el-radio>
            </el-radio-group>
          </el-col>
        </el-form-item>

        <el-form-item label="备注：">
          <el-col :span="18">
            <el-input type="textarea" v-model="editInfo.remark"></el-input>
          </el-col>
        </el-form-item>

        <div class="tc">
          <el-button
            :loading="$store.state.isLoading"
            size="small"
            @click="checkBtn"
          >
            确定
          </el-button>
        </div>
      </el-form>
    </el-dialog>

    <keep-alive>
      <component
        :is="current"
        :show="show_xz"
        :isAll="false"
        showType="list"
        :types="current == 'xz_packet' ? '2' : ''"
        @sendShop="getSend"
        @isshow="getShow"
      ></component>
    </keep-alive>

    <el-dialog
      :close-on-click-modal="false"
      title="查看图片"
      :modal-append-to-body="false"
      :visible.sync="show_img"
      class="tl size_13"
      width="700px"
    >
      <img :src="img" width="100%" />
    </el-dialog>

    <el-dialog
      :close-on-click-modal="false"
      title="股东权益"
      :modal-append-to-body="false"
      :visible.sync="show_equity"
      class="tl size_13"
      width="800px"
    >
      <el-form label-width="160px">
        <template v-if="editInfo.oid > 0">
          <el-form-item label="付款订单号：">
            <el-col :span="10">
              {{ editInfo.oid_cn }}
            </el-col>
            <el-col :span="3"> 支付金额： </el-col>
            <el-col :span="10">
              {{ editInfo.oid_money | keepTwoNum }}
            </el-col>
          </el-form-item>
          <el-form-item label="是否支付：">
            <el-col :span="10">
              {{ editInfo.is_pay == 1 ? "是" : "否" }}
            </el-col>
            <el-col :span="3"> 支付方式： </el-col>
            <el-col :span="10">
              {{ editInfo.pay }}
            </el-col>
          </el-form-item>
        </template>
        <!-- <el-form-item label="优惠券：">
          <el-col :span="4">
            <el-button
              :loading="$store.state.isLoading"
              size="mini"
              type="primary"
              @click="xzshop('xz_packet')"
            >
              添加优惠券
            </el-button>
          </el-col>
          <el-col :span="24" v-for="(item, i) in editInfo.packet" :key="i">
            股东券{{ i + 1 }}：{{ item.title }}&nbsp;&nbsp;&nbsp;数量：
            <el-input
              v-model="item.num"
              size="small"
              style="width: 120px"
            ></el-input
            >&nbsp;张&nbsp;&nbsp;&nbsp;&nbsp;
            <el-button
              :loading="$store.state.isLoading"
              size="mini"
              type="danger"
              @click="del_packet(i)"
            >
              删除
            </el-button>
          </el-col>
        </el-form-item> -->
        <div class="tc">
          <el-button
            :loading="$store.state.isLoading"
            size="small"
            @click="order_complete"
          >
            确定
          </el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import xz_packet from "@/components/currency/xz_packet.vue";
import xz_extract from "@/components/currency/xz_extract.vue";
import { shareholderListsSearchData } from "@/assets/js/searchData/searchData"; //引入搜索的数据
import compressimgUpload from "@/components/currency/compressimgUpload.vue";
export default {
  data() {
    return {
      userSearchData: shareholderListsSearchData,
      searchAll: {},
      loading: false,
      list: [],
      pageSize: 10,
      currentPage: 1,
      editInfo: {},
      show_edit: false,
      current: "",
      show_xz: false,
      show_img: false,
      img: "",
      is_check: this.$route.query.is_check || "",
      show_equity: false,
    };
  },
  components: {
    xz_extract,
    xz_packet,
    compressimgUpload,
  },
  created() {
    this.getNewsAll();
  },
  methods: {
    reload() {
      this.getNewsAll();
    },
    toImg(pic) {
      this.img = pic;
      this.show_img = true;
    },
    onSuccess1(pic) {
      this.editInfo.card_pic1 = pic;
    },
    onSuccess2(pic) {
      this.editInfo.card_pic2 = pic;
    },
    xzshop(str) {
      this.current = str;
      this.show_xz = true;
    },
    getShow(val) {
      this.show_xz = val;
    },
    getSend(row) {
      if (this.current == "xz_extract") {
        this.editInfo.extract_title = row.title;
        this.editInfo.extract_id = row.id;
      } else if (this.current == "xz_packet") {
        console.log(row);
        if (row.types != 2) {
          this.$fnc.alertError("请选择权益红包");
        }
        this.editInfo.packet.push({
          id: row.id,
          title: row.title,
          num: 1,
        });
        console.log(this.editInfo);
      }
    },
    del_packet(i) {
      this.editInfo.packet.splice(i, 1);
    },
    equity(val) {
      var params = JSON.parse(JSON.stringify(val));
      var packet = [];
      if (params.packet) {
        try {
          packet = JSON.parse(params.packet);
        } catch {
          packet = [];
        }
      }
      this.editInfo = {
        id: params.id,
        uid: params.uid,
        packet: packet || [],
        oid: params.oid,
        oid_cn: params.oid_cn,
        oid_money: params.order.money || 0,
        is_pay: params.order.is_pay || 0,
        pay: params.order.pay || 0,
        status: params.order.status || 0,
      };
      this.show_equity = true;
    },
    order_complete() {
      this.$swal({
        title: "您确定要发放股东权益",
        text: "请谨慎操作！",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "是的，我要发放",
        cancelButtonText: "容我三思",
      }).then((willDelete) => {
        if (willDelete.value) {
          var params = JSON.parse(JSON.stringify(this.editInfo));
          params.packet = JSON.stringify(params.packet);
          this.$api.getStation
            .shareholder_order_complete(params)
            .then((res) => {
              if (res.data.code == 200) {
                this.$fnc.alertSuccess({ text: "发放成功" });
                this.show_equity = false;
                this.getNewsAll(this.searchAll);
              } else {
                this.$fnc.alertError(res.data.code_desc, res.data.result);
              }
            });
        }
      });
    },
    deleteNew(id) {
      this.$swal({
        title: "您确定要删除这条信息吗",
        text: "删除后将无法恢复，请谨慎操作！",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "是的，我要删除",
        cancelButtonText: "容我三思",
      }).then((willDelete) => {
        if (willDelete.value) {
          var data = { id: id };
          this.$api.getStation.shareholder_del(data).then((res) => {
            if (res.data.code == 200) {
              this.$fnc.alertSuccess({ text: "操作成功" });
              this.getNewsAll(this.searchAll);
            } else {
              this.$fnc.alertError(res.data.code_desc, res.data.result);
            }
          });
        }
      });
    },
    checkBtn() {
      var params = JSON.parse(JSON.stringify(this.editInfo));
      this.$api.getStation.shareholder_check(params).then((res) => {
        if (res.data.code == 200) {
          this.$fnc.alertSuccess({ text: "审核成功" });
          this.getNewsAll(this.searchAll);
          this.show_edit = false;
        } else {
          this.$fnc.alertError(res.data.code_desc, res.data.result);
        }
      });
    },
    editBtn(item) {
      this.editInfo = JSON.parse(JSON.stringify(item));
      this.show_edit = true;
    },
    getSearch(obj) {
      this.searchAll = obj;
      this.getNewsAll(obj);
    },
    handleSizeChange(val) {
      var params = this.searchAll;
      params.page = "";
      params.page_size = val;
      this.getNewsAll(params);
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      var params = this.searchAll;
      params.page = val;
      params.page_size = this.pageSize;
      this.getNewsAll(params);
    },
    getNewsAll(data) {
      this.loading = true;
      var params = {};
      data = data || {};
      params = data;
      if (this.is_check) {
        params.is_check = this.is_check;
      }
      this.$api.getStation.shareholder_lists(params).then((res) => {
        if (res.data.code == 200) {
          this.list = res.data.result;
        }
        this.loading = false;
      });
    },
    imgError(item) {
      if (!item) {
        return require("@/assets/img/default_head.png");
      }
      return item;
    },
  },
};
</script>

<style>
</style>